<style>
</style>

<template>
  <div class="manage-wrap">
    <div class="operation-panel">
      <Row>
        <Col span="24">
          <Poptip width="400" title="搜索" placement="bottom-end" class="float-r">
            <Button type="primary" size="large" icon="ios-search">搜 索</Button>
            <div style="text-align:center" slot="content">
              <Form
                ref="searchForm"
                :model="searchForm"
                :label-width="80"
                value="true"
                style="min-width:200px;padding-top:20px;border-top:1px solid #a3adba;border-bottom:1px solid #a3adba;"
              >
                <Row>
                  <Form-item label="IMEI">
                    <Input v-model="searchForm.imei"></Input>
                  </Form-item>
                  <Form-item label="SIM">
                    <Input v-model="searchForm.sim"></Input>
                  </Form-item>
                  <Form-item label="设备名">
                    <Input v-model="searchForm.devname"></Input>
                  </Form-item>
                  <Form-item label="定位精度">
                    <Select v-model="searchForm.devStatus" :transfer="true">
                      <Option :value="0">全部</Option>
                      <Option :value="1">未注册</Option>
                      <Option :value="2">注册中</Option>
                      <Option :value="3">正常工作</Option>
                      <Option :value="4">故障</Option>
                      <Option :value="5">运维</Option>
                    </Select>
                  </Form-item>
                </Row>
              </Form>
              <Row>
                <Button
                  style="margin-left:5px;margin-top:10px;float:right;background-color: #5bc0de;color:#fff"
                  size="small"
                  @click="doSearchTableList"
                >确定</Button>
                <Button style="float:right;margin-top:10px;" size="small" @click="resetSearch">重置</Button>
              </Row>
            </div>
          </Poptip>
          <Button
            @click="refreshData"
            type="success"
            class="float-r"
            style="margin-right:10px;"
            size="large"
            icon="md-refresh"
          >刷新</Button>
          <!-- <Button
          @click="importDevice"
          type="error"
          class="float-r"
          style="margin-right:10px;"
          size="large"
          icon="ios-cloud-upload-outline"
        >导入SIM卡
        </Button>
        <Button
          type="warning"
          class="float-r"
          size="large"
          icon="md-key"
          @click="instructionsHanded"
          style="margin-right:10px;"
        >指令下发</Button>
        <Button
          class="float-r"
          size="large"
          icon="md-add"
          @click="addItem"
          style="margin-right:10px;"
          >添加</Button>-->
        </Col>
      </Row>
    </div>

    <!--table-->
    <Row>
      <Table
        ref="selectionTable"
        stripe
        size="small"
        :columns="tableColums"
        :data="tableData"
        @on-selection-change="onSelectionChange"
        :loading="tableLoading"
      ></Table>
    </Row>
    <Row>
      <Page
        :total="total"
        :page-size="currentPageSize"
        :current="currentPage"
        @on-change="changeCurrentPage"
        @on-page-size-change="changePageSize"
        show-total
        show-sizer
        style="float:right;margin-top:10px"
      ></Page>
    </Row>
    <!--新增编辑-->
    <deviceForm
      :modalShow="formShow"
      :modalFormTitle="formTitle"
      :parentForm="parentForm"
      @listenModalForm="hideModel"
      @refreshTableList="getTableList"
    ></deviceForm>
    <!--指令下发-->
    <deviceInstruction
      :modalShow="instructionModalShow"
      :parentDeviceList="selectedDevices"
      @listenModal="hideInstructionModel"
    ></deviceInstruction>
    <!--是否删除框-->
    <Modal v-model="delModal" width="360">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="information-circled"></Icon>
        <span>删除确认</span>
      </p>
      <div style="text-align:center">
        <p>是否继续删除？</p>
      </div>
      <div slot="footer">
        <Button type="error" size="large" long :loading="btnLoading" @click="comfirmDel">删除</Button>
      </div>
    </Modal>
    <!--&lt;!&ndash;导入ndash;&gt;-->
    <deviceImport
      :modalShow="importModalShow"
      @listenModalForm="hideImportModal"
      @refreshTableList="getTableList"
    ></deviceImport>
  </div>
</template>

<script>
import { getDeviceList, delDevice, resetLoc } from "@/api/device";
import deviceForm from "./deviceForm.vue";
import deviceInstruction from "./deviceInstruction.vue";
import deviceImport from "./deviceImport.vue";
export default {
  components: {
    deviceForm,
    deviceInstruction,
    deviceImport
  },
  data() {
    return {
      tableColums: [
        // {
        //   type: "selection",
        //   width: 50,
        //   align: "center",
        //   fixed: "left"
        // },
        {
          type: "index",
          width: 60,
          title: "序号",
          align: "center"
        },
        {
          align: "center",
          title: "SIM卡号",
          key: "sim",
          width: 120
        },
        {
          align: "center",
          title: "位号编码",
          key: "installCode",
          width: 120
        },
        {
          align: "center",
          title: "安装路段",
          key: "installRoad",
          width: 150
        },
        {
          align: "center",
          title: "安装日期",
          key: "installDate",
          width: 150
        },
        {
          align: "center",
          title: "设备状态",
          key: "status",
          width: 150,
          render: (h, params) => {
            const row = params.row;
            return h(
              "Tag",
              {
                props: {
                  type: "dot",
                  color: this.renderWorkStatusColor(row.devStatus)
                }
              },
              this.renderWorkStatus(row.devStatus)
            );
          }
        },
        {
          align: "center",
          title: "所属部门",
          key: "depName",
          width: 100
        },
        {
          align: "center",
          title: "型号",
          key: "model",
          width: 110
        },

        {
          align: "center",
          title: "制造单位",
          key: "manufac",
          width: 100
        },
        {
          align: "center",
          title: "制造日期",
          key: "manuDate",
          width: 100
        },

        {
          align: "center",
          title: "最近检修时间",
          key: "lastCheck",
          width: 150
        },
        {
          align: "center",
          title: "合计检修次数",
          key: "checkTimes",
          width: 100
        },

        {
          align: "center",
          title: "创建时间",
          key: "createTime",
          width: 150
        },
        {
          title: "操作",
          align: "center",
          width: 150,
          fixed: "right",
          render: (h, params) => {
            let actions = [];

            actions.push(
              h(
                "Button",
                {
                  props: {
                    type: "warning",
                    size: "small"
                  },
                  directives: [
                    {
                      name: "perms",
                      value: "sys:user:update"
                    }
                  ],
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.resetLoc(params.row.devId);
                    }
                  }
                },
                "清除实时位置"
              )
            );

            //   actions.push(
            //   h(
            //     "Button",
            //     {
            //       props: {
            //         type: "warning",
            //         size: "small"
            //       },
            //       directives: [
            //         {
            //           name: "perms",
            //           value: "sys:user:update"
            //         }
            //       ],
            //       style: {
            //         marginRight: "5px"
            //       },
            //       on: {
            //         click: () => {
            //           this.editItem(params.row);
            //         }
            //       }
            //     },
            //     "修改"
            //   )
            // );

            // actions.push(
            //   h(
            //     "Button",
            //     {
            //       props: {
            //         type: "error",
            //         size: "small"
            //       },
            //       directives: [
            //         {
            //           name: "perms",
            //           value: "sys:user:delete"
            //         }
            //       ],
            //       style: {
            //         marginRight: "5px"
            //       },
            //       on: {
            //         click: () => {
            //           this.delItem(params.row.devId);
            //         }
            //       }
            //     },
            //     "删除"
            //   )
            // );

            return h("div", actions);
          }
        }
      ],
      tableData: [],
      tableLoading: false,
      total: 0,
      currentPage: 1,
      currentPageSize: 20,
      formShow: false,
      formTitle: "添加设备",
      parentForm: {
        devId: "",
        devName: "",
        devStatus: "",
        imei: "",
        installCode: "",
        installDate: "",
        installRoad: "",
        lat: "",
        lng: "",
        manuDate: "",
        manufac: "",
        model: "",
        sim: "",
        depName: "",
        deptId: "",
        depCascader: ""
      },
      delModal: false,
      delId: "", //删除的Id
      btnLoading: false,
      searchForm: {
        imei: "",
        devname: "",
        sim: "",
        devStatus: 0,
        size: 20,
        current: 1
      },
      selectedDevices: [],
      instructionModalShow: false,
      importModalShow: false
    };
  },
  computed: {},
  created() {
    let status = this.$route.query.status;
    if (status) {
      this.searchForm.devStatus = status;
    }
  },
  mounted() {
    this.getTableList();
  },
  methods: {
    resetSearch() {
      this.searchForm.imei = "";
      this.searchForm.devname = "";
      this.searchForm.sim = "";
      this.searchForm.devStatus = 0;
    },
    doSearchTableList() {
      this.currentPage = 1;
      this.getTableList();
    },
    async getTableList() {
      this.tableLoading = true;
      let params = this.searchForm;
      params.current = this.currentPage;
      params.size = this.currentPageSize;
      const result = await getDeviceList(params);
      if (result.code == 0) {
        let res = result.data;
        this.total = res.total;
        this.tableData = res.records;
      }
      this.tableLoading = false;
    },
    changeCurrentPage(num) {
      this.currentPage = num;
      this.getTableList();
    },
    changePageSize(pageSize) {
      this.currentPageSize = pageSize;
      this.getTableList();
    },
    addItem() {
      Object.keys(this.parentForm).forEach(key => (this.parentForm[key] = ""));
      this.formTitle = "添加设备";
      this.formShow = true;
    },
    editItem(row) {
      this.parentForm = JSON.parse(JSON.stringify(row));
      this.formTitle = "修改设备";
      this.formShow = true;
    },
    delItem(Id) {
      this.delId = Id;
      this.delModal = true;
    },
    async comfirmDel() {
      this.btnLoading = true;
      try {
        const res = await delDevice(this.delId);
        if (res.code == "0") {
          this.$Message.success("删除成功!");
          this.getTableList();
          this.delModal = false;
        } else {
          this.$Message.error(res.msg);
        }
      } catch (err) {
        console.log(err);
        this.$Message.error("服务器异常，稍后再试");
      }
      this.btnLoading = false;
    },
    async resetLoc(Id) {
      try {
        const res = await resetLoc(Id);
        if (res.code == "0") {
          this.$Message.success("指令成功!");
        } else {
          this.$Message.error(res.msg);
        }
      } catch (err) {
        console.log(err);
        this.$Message.error("服务器异常，稍后再试");
      }
    },
    hideModel() {
      this.formShow = false;
    },
    renderWorkStatus(devStatus) {
      let status = "";
      if (devStatus == 1) {
        status = "未注册";
      } else if (devStatus == 2) {
        status = "注册中";
      } else if (devStatus == 3) {
        status = "正常工作";
      } else if (devStatus == 4) {
        status = "故障";
      } else if (devStatus == 5) {
        status = "运维";
      }
      return status;
    },
    renderWorkStatusColor(devStatus) {
      let color = "default";
      if (devStatus == 1) {
        color = "default";
      } else if (devStatus == 2) {
        color = "primary";
      } else if (devStatus == 3) {
        color = "success";
      } else if (devStatus == 4) {
        color = "error";
      } else if (devStatus == 5) {
        color = "warning";
      }
      return color;
    },
    hideInstructionModel() {
      this.instructionModalShow = false;
    },
    onSelectionChange(selections) {
      this.selectedDevices = selections;
    },
    instructionsHanded() {
      if (this.selectedDevices.length > 0) {
        this.instructionModalShow = true;
      } else {
        this.$Message.error("至少选择一个设备");
      }
    },
    importDevice() {
      this.importModalShow = true;
    },
    hideImportModal() {
      this.importModalShow = false;
    },
    refreshData() {
      this.resetSearch();
      this.getTableList();
    }
  }
};
</script>
